<template>
    <canvas :id="props.id" class="canvas"></canvas>
</template>

<script setup lang='ts'>
import { reactive, onMounted, nextTick, watch } from "vue";
import SVGA from 'svgaplayerweb'
const props = defineProps({
    img: String,
    id: String,
    loop: Number
});
const state: any = reactive({
    parser: new SVGA.Parser(), // 创建解析器
    player: null,
});
const info = () => {
    nextTick(async () => {
        state.player = new SVGA.Player(`#${props.id}`)
        state.parser.load("../kingset.svga", (videoItem: any) => {
            state.player.setVideoItem(videoItem);
            state.player.startAnimation();
        }, (_error: any) => {
            // alert(error.message);
        })

    })
}
watch(
    () => props.img,
    () => {
        info()
        state.player1.clear()
    },
    {
        deep: true,
    }
)
onMounted(() => {
    info()
})

</script>

<style lang="less" scoped>
.canvas {
    width: 100%;
    height: 100%;
}
</style>